<template>
    <el-dialog title="添加安排" :visible.sync="showDialog_" custom-class='dialog_right MkAddArrangementRecord dialogScroll_add' top="0%" @close='closeDialog("addForm")' @open='openDialog'>
      <el-scrollbar :wrapStyle="[{maxHeight:(bodyHeight-200)+'px'}]">
      <div class="headDiv">
        <div class="big">
          <span>{{currentStart}}</span>
          <ticket-arrow></ticket-arrow>
          <span>{{currentEnd}}</span>
        </div>
        <div class="small">途经：{{currentMidway}}</div>
        <!--<div class="small">每天14:00 每天16:00</div>-->
      </div>
      <el-form :model="addForm.formItem" :rules="addForm.rules" ref="addForm" label-width="80px">
        <input type="text" style="display:none" />
        <el-form-item  label="总票数" prop='totalTicket'>
          <el-input v-model="addForm.formItem.totalTicket" placeholder='请输入票数（必填）'size=""></el-input>
        </el-form-item>
        <el-form-item  label="发车时间" >
          <el-col :span="11">
            <el-form-item prop="date">
              <el-date-picker type="date" :picker-options="pickerOptionOnce" placeholder="请选择选择日期（必选）" v-model="addForm.formItem.date" style="width: 100%;"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :offset="2" :span="11">
            <el-form-item prop="time">
              <el-time-select
                v-model="addForm.formItem.time"
                :picker-options="picketOption"
                placeholder="请选择选择时间（必选）">
              </el-time-select>
              <!--<el-time-picker type="fixed-time" placeholder="请选择选择时间（必选）" v-model="addForm.formItem.time" style="width: 100%;"></el-time-picker>-->
            </el-form-item>
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer footerStyle">
        <el-button type="primary" class="btn-primary" :disabled = 'isSubmitBtnDisabled' @click='submitForm("addForm")' v-loading.fullscreen.lock="fullscreenLoading">保存</el-button>
        <el-button  type='primary' class='btn-cancel' :disabled = "isSubmitBtnDisabled" @click="showDialog_ = false" size=''>取消</el-button>
      </div>
      </el-scrollbar>
    </el-dialog>
</template>

<script>
import routeService from '../../../services/route'
import ticketArrow from '../../../components/ticketArrow.vue'
import { mapState } from 'vuex'
export default {
  name: 'MkAddArrangementRecord',
  components: {
    ticketArrow
  },
  props: ['showDialog','currentStart','currentEnd','currentMidway','currentId'],
  computed: mapState({
    bodyHeight: state => state.global.bodyHeight,
  }),
  methods: {
    closeDialog(formName) {
      this.$refs[formName].resetFields();
      this.$emit('closeDialog',this.isRefresh);
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let form = this.addForm.formItem;
          let param = {
            scheduleId: this.currentId,
            time: form.time,
            date: new Date(form.date).pattern('yyyy-MM-dd'),
            totalTicket: form.totalTicket,
          }

          this.fullscreenLoading = true;
          this.isSubmitBtnDisabled = true;

          routeService.addArrangementRecord(param, data => {
            this.$message.success('添加成功');
            this.isRefresh = 'yes';
            this.showDialog_ = false;
            this.fullscreenLoading = false;
          },data => {
            this.fullscreenLoading = false;
            this.isSubmitBtnDisabled = false;
          })
        }
      })
    },
    openDialog() {
      this.isRefresh = 'no';
      this.isSubmitBtnDisabled = false;
    },
  },
  watch: {
    showDialog: function(value) {
      this.showDialog_ = value;
    }
  },
  data () {
    let validateTotalTicket = (rule,val,callback) => {
      if(val == '') {
        callback("请输入票数");
      }else{
        let  reg = /(^0$|^[1-9]{1}[0-9]*$)/;
        if(!reg.test(val)) {
          callback('请输入数字');
        }else{
          callback();
        }
      }
    }
    return {
      pickerOptionOnce: {
        disabledDate: function(val) {
          let now = new Date();
          let oneDayLong = 24 * 60 *60 * 1000;
          let maxDay = now.getTime() + (6 - now.getDay()) * oneDayLong + 21 * oneDayLong
          return val < new Date(new Date().getTime() - 24 *60 *60 * 1000) || val >  new Date(maxDay);
        }
      },
      picketOption: {
        start: '06:00',
        step: '00:30',
        end: '23:30'
      },
      fullscreenLoading: false,
      isSubmitBtnDisabled:false,
      addForm: {
        formItem: {
          scheduleId:'',
          time:'',
          date:'',
          totalTicket: ''
        },
        rules: {
          totalTicket: {validator: validateTotalTicket,trigger:'change,blur'},
          date:{required:true,type:'date',message:'请选择日期',trigger:'change,blur'},
          time:{required:true,message:'请选择时间',trigger:'change,blur'}
        }
      },
      isRefresh: 'no',
      showDialog_: this.showDialog,
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less'>
 @import '../../../assets/style/main.less';
  .MkAddArrangementRecord{
    .headDiv{
      background:#f9fafa;
      padding:30px;
      position:relative;
      margin-bottom:20px;
      .big{
        span{
          font-size:24px;
          line-height: 24px;
          color:@fontColorOne;
        }
        margin-bottom:10px;
      }
      .small{
        font-size:14px;
        line-height: 30px;
        color:@fontColorTwo;
      }
    }
    .el-row{
      line-height: 40px;
    }
  }
</style>
